<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    :width="width"
    :close-on-click-modal="false"
    :before-close="handleCancel"
  >
    <div class="box-list-container">
      <div class="box-query-form">
        <el-form :model="queryParam" label-width="auto" label-position="right" :gutter="24">
          <el-row>
            <el-col :span="24">
              <el-form-item label="任务进度:">
                <div class="dispalyFlex">
                  <el-button type="success" size="small" @click="stateCheckAll">全选</el-button>
                  <el-button type="info" size="small" style="margin-right: 10px;" @click="stateCheckOutAll">全不选</el-button>
                  <el-checkbox-group v-model="queryParam.scheduleInfo" size="small">
                    <el-checkbox-button v-for="item in scheduleInfoList" :key="item.code" :label="item.code">{{ item.name }}</el-checkbox-button>
                  </el-checkbox-group>
                </div>
              </el-form-item>
            </el-col>
            <el-col :xl="8" :lg="8" :md="12" :sm="24">
              <el-form-item label="关键词:">
                <el-input v-model="queryParam.keyword" placeholder="请输入" />
              </el-form-item>
            </el-col>
            <el-col :xl="8" :lg="8" :md="12" :sm="24" class="table-search-btn">
              <el-button icon="el-icon-refresh" @click="searchReset">重置</el-button>
              <el-button type="primary" icon="el-icon-search" @click="searchQuery">查询</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="box-table">
        <div class="table-title">
          <div class="table-title-left">
            子表列表
          </div>
          <div>
            <el-button plain class="btnAdd" icon="el-icon-plus" @click="handleAdd('新增')">新增一条</el-button>
            <el-button plain class="btnAdd" icon="el-icon-plus" @click="smartUpload('智能识别上传')">智能识别上传</el-button>
          </div>
        </div>
        <!-- 批量操作 -->
        <div v-if="selectedRowList.length" class="batchAction">
          <div class="batchAction-left">
            <el-dropdown>
              <el-button>
                批量操作 <i class="el-icon-arrow-down el-icon--right" />
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <div @click="batchDelete"><i class="el-icon-delete" />删除</div>
                </el-dropdown-item>
                <el-dropdown-item>
                  <div @click="progressClearing"><i class="el-icon-refresh-left" />进度清零</div>
                </el-dropdown-item>
                <el-dropdown-item>
                  <div @click="completeTasks"><i class="el-icon-success" />一键完成任务</div>
                </el-dropdown-item>
                <el-dropdown-item>
                  <div @click="stopTasks"><i class="el-icon-remove" />一键停止任务</div>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div class="batchAction-right">
            已选择
            <span style="font-weight: 700">
              <el-link type="primary" :underline="false">{{ selectedRowList.length }}</el-link>
            </span>项
            <el-link type="primary" :underline="false" style="margin-left: 24px;" @click="onClearSelected">清空</el-link>
          </div>
        </div>
        <el-table ref="table" :data="dataSource" @selection-change="onSelectChange">
          <el-table-column type="selection" width="55" />
          <el-table-column fixed="left" prop="id" label="ID" width="60" />
          <el-table-column prop="fid" label="主表id" width="70" />
          <el-table-column prop="keyword" label="关键词" min-width="200" />
          <el-table-column prop="schedule" label="进度" width="60" />
          <el-table-column prop="upperLimit" label="上限" width="60" />
          <el-table-column prop="startTime" label="开始时间" width="160" />
          <el-table-column prop="endTime" label="结束时间" width="160" />
          <el-table-column prop="remark1" label="备注1" min-width="150" />
          <el-table-column prop="remark2" label="备注2" min-width="150" />
          <el-table-column prop="remark3" label="备注3" min-width="150" />
          <el-table-column prop="remark4" label="备注4" min-width="150" />
          <el-table-column prop="updateTime" label="更新时间" width="160" />
          <el-table-column fixed="right" label="操作" width="110">
            <template slot-scope="scope">
              <el-button type="text" @click="handleEdit('编辑', scope.row)">编辑</el-button>
              <el-popconfirm title="确定删除吗？" style="margin-left: 10px" @confirm="handleDelete(scope.row[guidFieldName])">
                <el-button slot="reference" type="text" style="color: red;">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <div class="box-paging">
          <Pagination
            v-show="ipagination.total > 0"
            layout="total, sizes, prev, pager, next"
            :total="ipagination.total"
            :page.sync="ipagination.pageNum"
            :limit.sync="ipagination.pageSize"
            @pagination="loadData"
          />
        </div>
      </div>
    </div>
    <handleDraweSub ref="modalForm" @ok="modalFormOk" />
    <smartUpload ref="smartUpload" @ok="modalFormOk" />
  </el-dialog>
</template>

<script>
import { postAction } from '@/api/manage'
import { listMixin } from '@/mixins/listMixin'
import Pagination from '@/components/Pagination'
import handleDraweSub from './handleDraweSub'
import smartUpload from './smartUpload'

export default {
  components: {
    Pagination,
    handleDraweSub,
    smartUpload
  },
  mixins: [listMixin],
  data() {
    return {
      guidFieldName: 'id', // 唯一标识字段
      visible: false,
      toggleSearchStatus: false,
      disableMixinCreated: true,
      title: '',
      scheduleInfoList: [
        { name: '未开始', code: '未开始' },
        { name: '未完成', code: '未完成' },
        { name: '已完成', code: '已完成' }
      ],
      queryParam: {
        scheduleInfo: []
      },
      ipagination: { // 分页参数
        pageNum: 1,
        pageSize: 50,
        total: 0
      },
      width: '98%',
      url: {
        list: 'subTable.aspx?action=GetList',
        delete: 'subTable.aspx?action=Delete',
        deleteBatch: 'subTable.aspx?action=DeleteBatch'
      }
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    // 重置
    searchReset() {
      this.queryParam = {
        scheduleInfo: []
      }
      this.loadData(1)
    },
    // 全选
    stateCheckAll() {
      this.queryParam.scheduleInfo = this.scheduleInfoList.map(v => v.code)
    },
    // 全不选
    stateCheckOutAll() {
      this.queryParam.scheduleInfo = []
    },
    // 停止任务
    stopTasks() {
      if (this.selectedRowList.length <= 0) {
        this.$message.warning('请选择一条记录！')
        return
      } else {
        const that = this
        this.$confirm('是否将选中数据一键停止任务?', '确认完成', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          that.$store.dispatch('app/setLoading', true)
          postAction('subTable.aspx?action=stopTasks', { idList: this.selectedRowList }).then((res) => {
            if (res.code === 1) {
              that.$message.success(res.message || '操作成功！')
              that.loadData()
            } else {
              that.$message.warning(res.message || '操作失败！')
            }
          }).finally(() => {
            this.$store.dispatch('app/setLoading', false)
          })
        })
      }
    },
    // 一键完成任务
    completeTasks() {
      if (this.selectedRowList.length <= 0) {
        this.$message.warning('请选择一条记录！')
        return
      } else {
        const that = this
        this.$confirm('是否将选中数据一键完成任务?', '确认完成', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          that.$store.dispatch('app/setLoading', true)
          postAction('subTable.aspx?action=completeTasks', { idList: this.selectedRowList }).then((res) => {
            if (res.code === 1) {
              that.$message.success(res.message || '操作成功！')
              that.loadData()
            } else {
              that.$message.warning(res.message || '操作失败！')
            }
          }).finally(() => {
            this.$store.dispatch('app/setLoading', false)
          })
        })
      }
    },
    // 进度清零
    progressClearing() {
      if (this.selectedRowList.length <= 0) {
        this.$message.warning('请选择一条记录！')
        return
      } else {
        const that = this
        this.$confirm('是否将选中数据进度清零?', '确认清零', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          that.$store.dispatch('app/setLoading', true)
          postAction('subTable.aspx?action=progressClearing', { idList: this.selectedRowList }).then((res) => {
            if (res.code === 1) {
              that.$message.success(res.message || '操作成功！')
              that.loadData()
            } else {
              that.$message.warning(res.message || '操作失败！')
            }
          }).finally(() => {
            this.$store.dispatch('app/setLoading', false)
          })
        })
      }
    },
    show(rowData) {
      this.fid = rowData.id
      console.log('this.fid', this.fid)
      this.updateState = 'edit'
      this.$refs[this.refName]?.clearValidate()
      this.visible = true
      this.loadData(1)
    },
    // 智能识别上传
    smartUpload(title) {
      this.$refs.smartUpload.add(this.fid)
      this.$refs.smartUpload.title = title
      this.$refs.smartUpload.disableSubmit = false
    },
    handleAdd(title) {
      console.log('this.fid', this.fid)
      this.$refs.modalForm.add(this.fid)
      this.$refs.modalForm.title = title
      this.$refs.modalForm.disableSubmit = false
    },
    handleEdit(title, rowData, disableSubmit) {
      this.$refs.modalForm.edit(rowData)
      this.$refs.modalForm.title = title
      this.$refs.modalForm.disableSubmit = disableSubmit
    },
    // 添加查询参数 默认加空对象
    addQueryParams() {
      return {
        fid: this.fid
      }
    },
    handleCancel(done) {
      // this.$emit('ok')
      done()
    }
  }
}
</script>

<style lang="scss" scoped>
.dispalyFlex{
  display: flex;
  align-items: center;
}
::v-deep .el-table__fixed {
  height: 100% !important;
}
::v-deep .el-table__fixed-right {
  height: 100% !important;
}
</style>
